  <template>
  <div class="home">
    <el-container>
      <el-header
        style="
          left: 0px;
          top: 0px;
          width: 100%;
          right: 0;
          z-index: 5;
          margin-top: 0;
        "
      >
        <el-form
          ref="form"
          :model="form"
          rules="rules"
          inline="true"
          size="mini"
          class="Seach"
          style="float: left"
          label-position="left"
        >
          <el-form-item v-if="this.StepSN == 0">
            <el-button
              type="primary"
              size="mini"
              @click="open"
              icon="el-icon-tickets"
              >添加人员</el-button
            >
          </el-form-item>
          <el-form-item v-if="this.StepSN == 0">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-tickets"
              @click="confirmData(0)"
              >保存</el-button
            >
          </el-form-item>
          <el-form-item v-if="this.StepSN == 0">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-check"
              @click="confirmData(2)"
              >提交</el-button
            >
          </el-form-item>
          <el-form-item v-if="this.StepSN == 0">
            <el-button
              type="primary"
              @click="batchdelete()"
              icon="el-icon-delete-solid"
              size="mini"
              >批量作废</el-button
            >
          </el-form-item>

          <el-form-item v-if="this.StepSN > 0">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-check"
              @click="confirmData(3)"
              >退回上一步</el-button
            >
          </el-form-item>
          <el-form-item v-if="this.StepSN > 0">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-check"
              @click="confirmData(2)"
              >审核</el-button
            >
          </el-form-item>
        </el-form>
      </el-header>

      <el-main style="margin: 3px 10px 10px 10px">
        <span
          style="
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            display: inline-block;
            width: 100%;
            padding: 3px 0 5px 0;
          "
        >
          <span>内部招聘费用申请</span>
          <span style="margin-left: 10px">
            <svg-icon v-if="this.form.Status == 0" icon-class="Editing" />
            <svg-icon v-if="this.form.Status == 1" icon-class="ingAudit" />
            <svg-icon v-if="this.form.Status == 2" icon-class="Finish" />
          </span>
        </span>

        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          class="formStyle"
          inline
          label-width="100px"
        >
          <el-form-item label="单据编号：" size="small">{{
            form.RecommendCostAppyNo
          }}</el-form-item>

          <el-form-item label="单位名称：" prop="Organizeid">
            <el-select
              :disabled="StepSN == 0 ? false : true"
              v-model="form.Organizeid"
              placeholder="请选择"
              @change="select_status"
              size="small"
            >
              <el-option
                :label="item.Organizename"
                :value="item.Organizeid"
                v-for="item in selectDepList"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="月份：" prop="RecommendCosDate">
            <el-date-picker
              :disabled="StepSN == 0 ? false : true"
              type="month"
              v-model="form.RecommendCosDate"
              @change="select_Month"
              placeholder=" 月份"
              size="small"
            />
          </el-form-item>
        </el-form>

        <el-table
          :data="formDetail"
          :height="tableHeight"
          style="width: 100%; margin-top: 0px"
          border
          max-height="640"
          show-summary
        >
          <el-table-column label="序号" type="index" width="50" align="center">
          </el-table-column>
          <el-table-column align="center" label="推荐人信息">
            <el-table-column align="center" label="工号">
              <template slot-scope="scope">{{ scope.row.UserCode }}</template>
            </el-table-column>

            <el-table-column align="center" label="姓名">
              <template slot-scope="scope">{{ scope.row.UserName }}</template>
            </el-table-column>

            <el-table-column align="center" label="单位">
              <template slot-scope="scope">{{
                scope.row.Organizename
              }}</template>
            </el-table-column>
          </el-table-column>

          <el-table-column align="center" label="推荐人信息">
            <el-table-column align="center" label="工号">
              <template slot-scope="scope">{{
                scope.row.RecommendUserCode
              }}</template>
            </el-table-column>

            <el-table-column align="center" label="姓名">
              <template slot-scope="scope">{{
                scope.row.RecommendUserName
              }}</template>
            </el-table-column>

            <el-table-column align="center" label="单位">
              <template slot-scope="scope">{{
                scope.row.RecommendNunitName
              }}</template>
            </el-table-column>

            <el-table-column align="center" label="职位">
              <template slot-scope="scope">{{
                scope.row.RecommendJobName
              }}</template>
            </el-table-column>

            <el-table-column align="center" label="聘用日期">
              <template slot-scope="scope">{{ scope.row.JoinedDate }}</template>
            </el-table-column>

            <el-table-column align="center" prop="WorkDate" label="在职天数">
              <template slot-scope="scope">
                <el-input
                  :disabled="StepSN == 0 ? false : true"
                  v-model="scope.row.WorkDate"
                ></el-input>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column align="center" prop="PaymenCost" label="费用支付">
            <el-table-column align="center" label="支付金额">
              <template slot-scope="scope">
                <el-input
                  :disabled="StepSN == 0 ? false : true"
                  v-model="scope.row.PaymenCost"
                ></el-input>
              </template>
            </el-table-column>

            <el-table-column align="center" label="已支金额">
              <template
                autosize="true"
                :disabled="StepSN == 0 ? false : true"
                slot-scope="scope"
                >{{ scope.row.CompletePaymenCost }}</template
              >
            </el-table-column>

            <el-table-column align="center" label="剩余支付">
              <template
                autosize="true"
                :disabled="StepSN == 0 ? false : true"
                slot-scope="scope"
                >{{ scope.row.NoCompletePaymenCost }}</template
              >
            </el-table-column>
          </el-table-column>

          <el-table-column
            align="center"
            fixed="right"
            width="100"
            label="操作"
          >
            <template slot-scope="scope">
              <!-- <el-button type="primary" icon="el-icon-edit" @click="handleEdit(scope)" circle></el-button> -->
              <el-button
                type="danger"
                v-show="StepSN == 0"
                icon="el-icon-delete"
                @click="delData(scope, 1)"
                circle
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          class="formStyle"
          inline
          label-width="100px"
        >
          <el-form-item label="填单人：">{{ form.CreatedByName }}</el-form-item>
          <el-form-item label="填单时间：">{{ form.CreatedOn }}</el-form-item>
        </el-form>
      </el-main>

      <el-dialog
        v-if="dialogFormVisible"
        :visible.sync="dialogFormVisible"
        :title="人员资料"
        customClass="customWidth"
        width="60%"
      >
        <el-form :model="name" label-width="80px" label-position="left">
          <v-RecommendCostRecordOpen
            :ParmType="ParmType"
            @FunRecommendCostRecordAdd="FunRecommendCostRecordAdd"
          ></v-RecommendCostRecordOpen>
        </el-form>
      </el-dialog>

      <!-- <el-main>
        <el-form>
          <el-form-item label="填单人：">{{ form.CreatedByName }}</el-form-item>
          <el-form-item label="填单时间：">{{ form.CreatedOn }}</el-form-item>
        </el-form>
      </el-main> -->

      <el-main style="margin: 1px 10px">
        <span style="font-size: 20px; font-weight: blod; padding: 10px"
          >工作流：</span
        >

        <el-timeline
          :reverse="true"
          ref="ListLog"
          :model="ListLog"
          style="margin: 10px"
        >
          <el-timeline-item
            v-for="(activity, index) in ListLog"
            :key="index"
            :timestamp="activity.CreateDateTime"
          >
            {{ activity.Remark }}
          </el-timeline-item>
        </el-timeline>
      </el-main>
      <el-dialog :visible.sync="dialogshow" width="700px" top="20px">
        <el-tabs type="border-card">
          <el-tab-pane label="作废名单">
            <el-form :inline="true" label-width="120px" label-position="left">
              <el-form-item>
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 20, maxRows: 20 }"
                  placeholder="名单"
                  v-model="deleteData"
                  style="width: 630px"
                >
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 3, maxRows: 3 }"
                  placeholder="作废原因"
                  v-model="deleteReason"
                  style="width: 630px"
                >
                </el-input>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
        <div style="text-align: right">
          <el-button type="danger" @click="canceldelete">取消</el-button>
          <el-button type="primary" @click="deleltAccount">作废</el-button>
        </div>
      </el-dialog>
    </el-container>
  </div>
</template>

<style scoped>
.customWidth {
  width: 80%;
 
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 150px;
}
.el-table .warning-row {
  background: oldlace;
}

.svg-icon[data-v-c8a70580] {
  width: 2.5em;
  height: 2.5em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  margin-bottom: -15px;
}
</style>

<script>
import path from "path";
import { deepClone } from "@/utils";

import { updateForm, DeleteRow, updateFormGet } from "@/api/RecommendCostForm";
import elementIcons from "../icons/element-icons";
import vRecommendCostRecordOpen from "./RecommendCostRecordOpen";

export default {
  components: {
    vRecommendCostRecordOpen,
  },

  props: {
    inputName: String,
    required: true,
  },
  data() {
    return {
      tableHeight: null,
      dialogshow: false,
      deleteData: "",
      deleteReason: "",
      activeName: "first",
      form: [],
      StepSN: -1,
      ListLog: [],
      formDetail: [],
      reverse: true,
      selectlist: [],
      selectDepList: [],
      multipleTable: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      where: "",
      rules: {
        Organizeid: [
          { required: true, message: "请选择月份", trigger: "change" },
        ],
        RecommendCosDate: [
          { required: true, message: "请选择单位", trigger: "change" },
        ],
      },
    };
  },
  created: function () {
    this.DataListData();
  },
  mounted() {
    setTimeout(() => {
      this.tableHeight = window.innerHeight - 220 + "px";
    });
  },
  methods: {
    async DataListData() {
      // 提交数据，需要修改

      if (this.inputName == null) {
        this.inputName = this.$route.query.billID;
      }

      const result = await updateForm({
        billID: this.inputName,
        IsPostBack: false,
      });

      this.form = result.data1.Table[0];
      this.selectlist = result.data3.Table;
      this.selectDepList = result.date4.Table;
      result.data2.Table.forEach((m) => {
        this.selectDepList.forEach((s) => {
          if (m.Organizename != null) {
            if (m.Organizename.indexOf(s.Organizename) != -1) {
              m.Organizename = s.Organizename;
            }
          }
          if (m.RecommendNunitName != null) {
            if (m.RecommendNunitName.indexOf(s.Organizename) != -1) {
              m.RecommendNunitName = s.Organizename;
            }
          }
        });
      });
      this.formDetail = result.data2.Table;

      this.ListLog = result.ListLog;
      this.StepSN = result.StepSN;
      if (this.form.Status == null) {
        this.form.Status = 0;
      }
      // this.selectlist = result.data3.Table;
      // this.Customerlist = result.data4.Table;

      // if (result.code === 20000) {

      // } else {
      //   this.$notify({
      //     title: 'error',

      //     message: result.message,
      //     type: 'error'
      //   })
      // }
    },
    async confirmData(submit) {
      // 提交数据，需要修改

      const Fresult = true;
      if (submit == 2) {
        this.$refs["form"].validate((valid) => {
          if (!valid) {
            this.$notify({
              title: "不能提交",
              dangerouslyUseHTMLString: true,
              message: "不可为空，不能提交",
              type: "error",
            });
            Fresult = false;
            return false;
          }
        });
      }

      if (Fresult) {
        const result = await updateForm({
          HeadDate: JSON.stringify(this.form),
          BodyDate: JSON.stringify(this.formDetail),
          billID: this.form.RecommendCostAppyNo,
          IsPostBack: true,
          submit: submit,
        });

        this.form = result.data1.Table[0];

        result.data2.Table.forEach((m) => {
          result.date4.Table.forEach((b) => {
            if (m.Organizename != null) {
              if (m.Organizename.includes(b.Organizename)) {
                m.Organizename = b.Organizename;
              }
            }
            if (m.RecommendNunitName != null) {
              if (m.RecommendNunitName.includes(b.Organizename)) {
                m.RecommendNunitName = b.Organizename;
              }
            }
          });
        });

        this.formDetail = result.data2.Table;
        this.selectDepList = result.date4.Table;
        this.StepSN = result.StepSN;
        this.ListLog = result.ListLog;
        if (result.code === 20000) {
          //const { description, key, name } = this.EditObj
          this.dialogVisible = false;
          this.$notify({
            title: result.msg,
            dangerouslyUseHTMLString: true,
            message: "",
            type: "success",
          });
          this.DataListData();
          this.roles = [];
        } else {
          this.$notify({
            title: result.msg,
            dangerouslyUseHTMLString: true,
            message: "",
            type: "error",
          });
        }
      }
    },
    //editUserInfo(index) {
    //  this.isEditObj[index].a = false;
    //}
    //checkEditUserInfo(index) {      //编辑用户信息
    //  this.isEditObj[index].a = true;
    //},
    //cancelEditUserInfo(index) {
    //  this.isEditObj[index].a = true;
    //}

    // 删除方法
    // 删除选中行
    delData({ $index, row }, typesID) {
      this.$prompt("请填写作废原因：", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
      })
        .then(async ({ value }) => {
          if (value == "" || value == null) {
            this.$notify({
              title: "作废失败",
              dangerouslyUseHTMLString: true,
              message: "作废原因不能为空。",
              type: "error",
            });
          } else {
            if (typesID == 1) {
              this.formDetail.splice($index, 1);
            }

            if (row.ID == null) {
              return false;
            }

            const result = await DeleteRow({
              ID: row.ID,
              billID: this.inputName,
              types: typesID,
              IsPostBack: false,
              Remark: value,
            });

            this.$message({
              type: "success",
              message: "已作废!",
            });
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    //批量作废
    batchdelete() {
      this.dialogshow = true;
    },
    async deleltAccount() {
      if (
        this.deleteReason == "" ||
        this.deleteReason == null ||
        this.form.RecommendCosDate == "" ||
        this.form.RecommendCosDate == null
      ) {
        this.$notify({
          title: "作废失败",
          dangerouslyUseHTMLString: true,
          message: "作废原因、时间不能为空。",
          type: "error",
        });
      } else {
        const result = await DeleteRow({
          time: JSON.stringify(this.form.RecommendCosDate),
          billID: this.inputName,
          Remark: this.deleteReason,
          deleteData: this.deleteData,
          deleteType: 2,
        });
        if (result.code === 20000) {
          this.dialogshow = false;
          this.$notify({
            title: "success",
            dangerouslyUseHTMLString: true,
            message: result.msg,
            type: "success",
          });
          this.DataListData();
        } else {
          this.$notify({
            title: "error",
            dangerouslyUseHTMLString: true,
            message: result.msg,
            type: "error",
          });
        }
      }
    },
    canceldelete() {
      this.dialogshow = false;
      this.deleteData = "";
      this.deleteReason = "";
    },
    addRow(types) {
      let list = {};

      if (types == 1) {
        this.formDetail.push(list);
      }
    },

    select_status(val) {
      this.$forceUpdate();
    },
    open(type) {
      this.ParmType = type; //传入参数
      this.dialogFormVisible = true;
    },
    async select_Month(val) {
      const result = await updateForm({
        billID: this.form.RecommendCostAppyNo,
        IsPostBack: false,
        Organizeid: this.form.Organizeid,
        Month: JSON.stringify(this.form.RecommendCosDate),
      });

      this.formDetail = result.data2.Table;
    },
    FunRecommendCostRecordAdd: function (Rows, ParmType) {
      //添加部门

      // this.multipleTable=Rows[0];

      for (let v of Rows) {
        this.multipleTable = v;
        let row = {
          UserCode: this.multipleTable.UserCode,
          UserName: this.multipleTable.UserName,
          Organizeid: this.multipleTable.Organizeid,
          Organizename: this.multipleTable.Organizename,
          JobName: this.multipleTable.JobName,
          RecommendUserCode: this.multipleTable.RecommendUserCode,
          RecommendUserName: this.multipleTable.RecommendUserName,
          RecommendNunit: this.multipleTable.RecommendNunit,
          RecommendNunitName: this.multipleTable.RecommendNunitName,

          RecommendCostNo: this.multipleTable.RecommendCostNo,
          // RecommendJobName: this.multipleTable.UserName
          // JoinedDate: this.multipleTable.UserName,
          // WorkDate: this.multipleTable.UserName,
          // PaymentDate: this.multipleTable.UserName,
        };

        this.formDetail.push(row);
      }

      //      this.form.UserCode=this.multipleTable.UserCode
      //      this.form.UserName=this.multipleTable.UserName
      //  this.form.Organizename=this.multipleTable.OrganizeName
      //  this.form.JobName=this.multipleTable.JobName
      //  this.form.Address=this.multipleTable.Address

      this.dialogFormVisible = false;
    },
  },
};
</script>



<style scoped>
.home {
  background: #f5f5f5;
}
.home /deep/ .el-header {
  margin: 10px 10px 0 10px;
  padding: 5px;
  height: 40px !important;
  background: #fff;
}
.home .el-main {
  padding: 5px;
  margin: 10px;
  background: #fff;
}
.home /deep/ .el-form .el-range-editor.el-input__inner {
  width: 250px;
}
.home /deep/ input::-webkit-outer-spin-button,
.home /deep/ input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
.infoColor {
  font-weight: bold;
  color: #909399;
}
.redColor {
  font-weight: bold;
  color: red;
}
.blueColor {
  font-weight: bold;
  color: #409eff;
}
.orangeColor {
  font-weight: bold;
  color: orange;
}
.greenColor {
  font-weight: bold;
  color: #67c23a;
}
.svg-icon[data-v-c8a70580] {
  width: 2.5em;
  height: 2.5em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  margin-bottom: -15px;
}
</style>



